<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-21 11:44:11
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-24 09:36:11
 * @FilePath: /web_music_app_vue3_vite_ts/src/views/aside/boke/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="c_container">
        <div class="title">官方榜</div>

        <div class="bd_box" v-for="(item, i) in data" :key="i">
            <img :src="item.img">
            <div v-show="item.arr" class="son_box">
                <div class="box_item" v-for="(sItem, sIndex) in item.arr" :key="sIndex" @click="itemClick(i, sIndex)">
                    <span :style="{
                        color: sIndex < 3 ? '#d33a31' : ''
                    }">{{ sIndex + 1 }}</span>
                    <span class="box_name ell">{{ sItem.name }}</span>
                    <span class="box_singer ell">{{ sItem.singer }}</span>
                </div>
                <div class="all" @click="toDetail(item.id)">
                    查看全部
                    <svg style="padding-left: 4px;" t="1708690148011" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="61468" width="14" height="14">
                        <path
                            d="M320 160c0 8.2 3.1 16.4 9.4 22.6L658.7 512 329.4 841.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l352-352c12.5-12.5 12.5-32.8 0-45.3l-352-352c-12.5-12.5-32.8-12.5-45.3 0-6.3 6.2-9.4 14.4-9.4 22.6z"
                            p-id="61469" :fill="themeName !== 'dark' ? '#707070' : '#797979'"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import dataArr from "./data";
import { ref, onMounted, computed, nextTick } from "vue";
import useGlobalStore from "../../store/modules/global";
import { useRouter } from "vue-router";
const router = useRouter();
//获取小仓库对象
let globalStore = useGlobalStore();
const themeName = computed(() => globalStore.themeName);
let data = ref([]);
onMounted(() => {
    let d = [];
    dataArr.forEach(item => {
        d.push({
            ...item,
            arr: item.arr.filter((it, i) => i < 5)
        })
    });
    data.value = d;

})

function itemClick(i: number, index: number) {
    localStorage.setItem("PlayBackTwoIndex", index);
    globalStore.updateStateByKeys({
        music_Arr: [
            dataArr[i]
        ],
    });
    nextTick(() => {
        window.changeMusic(index);
    })

}
const selectedItem = computed(() => globalStore.currentPath);
let backLeft: any | [] = computed(() => globalStore.backLeft);
function toDetail(id: number){
    globalStore.updateStateByKeys({
        backLeft: [
            ...backLeft.value,
            selectedItem.value
        ],
        backRight: []
    });
    router.push(`detail?id=${id || 0}`)

}


</script>

<style scoped lang="less">
.c_container {
    width: calc(100% - 40px);
    height: calc(100% - 20px);
    padding: 10px 20px;
    background: @fzBg;
    overflow-y: auto;

    .title {
        color: @color;
        font-size: 16px;
        font-weight: 600;
    }

    .bd_box {
        padding: 15px 0px;
        display: flex;

        img {
            width: 180px;
            height: 180px;
            border-radius: 4px;
        }

        .son_box {
            padding-left: 20px;
            width: calc(100% - 200px);

            .box_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 34px;
                border-radius: 2px;
                padding: 0px 8px;
                font-size: 13px;
                color: @fzFontColor;
                cursor: pointer;
                margin: 1px 0px;

                &:hover {
                    background-color: @fzItemBg;
                }

                .box_name {
                    color: @color;
                    width: 74%;
                }

                .box_singer {
                    text-align: right;
                    width: 19%;

                }
            }

            .box_item:nth-child(2n - 1) {
                background: @fzItemBg;
            }

            .all {
                display: flex;
                align-items: center;
                color: @color;
                font-size: 13px;
                padding-top: 10px;
                cursor: pointer;
            }
        }
    }
}
</style>